<!--编辑商品-->
<template lang="html">
	<div>
		<van-nav-bar title="编辑发布商品"   @click-left="onClickLeft">
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>		  
		  <div class="a" slot="right">
		  	<van-button round type="info" :loading="isLoading"
		  		:disabled="!canRelease" size="small" @click="release"
		  		class="release">确认</van-button>
		  </div>		  
		</van-nav-bar>	
		
		<div class="wrap">

			<div>
			  <van-field
			  	style="padding: 0;"
			    v-model="params.comDesc"
			    rows="6"
			    autosize
			    type="textarea"
			    maxlength="50"
			    placeholder="品牌型号，新旧程度，入手渠道，转手原因..."		    
			  />		  
			</div>	
			

			<van-uploader :after-read="afterRead" multiple :deletable="false"
				 v-model="fileList"/>
				 
			<div v-if="fileList.length>0" @click="clear">
				<van-button plain round  size="small" 
					icon="delete"  type="primary">清空图片</van-button>
			</div>
			<div class="tips">
				<span>
					<van-icon name="location-o" style="vertical-align: -1px;"/>
					{{params.address}}
				</span>
			</div>
			
			<div class="cell">	            
	            <van-cell title="价格设置" is-link :value="mainPrice" 
	            	size="large" icon="gem-o" class="borderCell"
	            	@click="showPrice"
	            />
          
	            <van-cell title="更多信息" is-link @click="showMoreInfo"
	            	:value="formatMoreInfo(mainMoreInfo)" size="large" 
	            	class="borderCell" icon="comment-o"	            	
	            />

	            <van-cell title="平台管理费" 
	                size="large" :value='platform'
	            	class="borderCell" icon="gold-coin-o"	            	
	            />	            
            </div>            
		</div>

		
		<!--更多信息弹框-->
		<floor20 :moreInfo="moreInfo" @confirmMoreInfo="handleMoreInfo"
			@moreInfoCancle="hiddenMoreInfo" ref="floor20">
		</floor20>
		
		<!--价格弹出层-->
		<floor21 :showPricePopup="showPricePopup" @confirmPricePopup="handlePricePopup"
			@pricePopupCancle="hiddenPricePopup" ref="floor21">
		</floor21>
	</div>

</template>                                                                

<script>
import Floor20 from '_c/market/floor/floor20.vue'	
import Floor21 from '_c/market/floor/floor21.vue'	
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
	name: 'Release',	
	data() {
       return {
 	  	  comId:'',
       	  userId:'',
       	  params:{   
       	  	  comId:'',
	       	  goodsIsprice:'', // 是否讲价
	       	  goodsIsnew:'', // 是否全新
	       	  trade_type:'', // 交易方式      
	       	  categoryId:'', //用于绑定 1级分类
	       	  comDesc:'',  // 用于绑定商品描述
	       	  comUid:1,   // 用于绑定发布者ID 
	       	  address:'无锡 梁溪区', // 用于绑定发布地址 不可调试 站点必须是 HTTPS
       	      comPrice:'',    // 用于绑定商品售价
       	      comOriginalprice:'', // 用于绑定商品原价
       	      comIspost:false,  // 用于绑定是否包邮
       	      freight:'',    // 用于绑定商品运费	   
       	      goodsImage:'',  // 用于绑定商品图片
       	      money:'0.00'
       	  },       	  
          moreInfo:false,    // 用于绑定是否显示更多信息弹层       	  
       	  mainMoreInfo:'补充信息获更多曝光',   // 主页面更多信息的placehold，不记录字段 用于显示
          showPricePopup:false, // 用于绑定价格编辑框显示   
       	  mainPrice:'开个价', // 主页面显示价格的placehold       	         	  
       	  fileList:[],
       	  goodsImage:[],
       	  url1:'/oss/api/v1/market/upload/common', // 用于绑定图片上传地址
       	  url2:this.$api+'/marketorderservice/api/v1/market/updateGoods',       // 编辑发布产品
       	  url3:this.$api+'/marketorderservice/api/v1/market/goods/goodsManagerFee',
       	  url4:this.$api+'/marketorderservice/api/v1/market/goods',   // 用于获取商品信息
       	  canRelease:false,   // 用于绑定是否能够发布
       	  isLoading:false,     // 用于绑定发布按钮是否处于加载中
       	  platform:'￥0.00'      // 用于绑定平台管理费用
       }
	},
	watch:{
        params: {
         handler: function() {         	
         	let goodsImage=this.params.goodsImage
         	let categoryId=this.params.categoryId
         	let comPrice=this.params.comPrice
         	let comDesc=this.params.comDesc
            if(comDesc!=''&&comPrice!=''&&goodsImage!=''&&categoryId!=''){
            	this.canRelease=true
            }else{
            	this.canRelease=false
            }
         },
         deep: true
        }
	},
	components: {
       Floor20,Floor21
	},	
	methods: {
		// 处理确认后的信息
		handleMoreInfo(obj,str){
			this.moreInfo=false
			this.params.goodsIsprice=obj.goodsIsprice
			this.params.goodsIsnew=obj.goodsIsnew
			this.params.trade_type=obj.trade_type
			this.params.categoryId=obj.categoryId			
			if(str!=''){
			  this.mainMoreInfo=str	
			}			
		},
		// 隐藏更多信息弹出层
		hiddenMoreInfo(){
			this.moreInfo=false
		},
		// 显示更多信息
		showMoreInfo(){
		  	this.moreInfo=true
		},	
		// 格式化更多信息
		formatMoreInfo(str){
			if(str.length>=10){
				str=str.substring(0,8)+'...'
			}
			return str
		},
	   
	    // 显示价格弹出层
	    showPrice(){
	      	this.showPricePopup=true
	    },	
	    // 隐藏价格弹出层
	    hiddenPricePopup(){
	    	this.showPricePopup=false
	    },
	    // 处理确认价格
	    handlePricePopup(obj,str){
	    	this.showPricePopup=false
	    	if(str){
	    		this.mainPrice=str
	    	}
	    	this.params.comPrice=obj.comPrice
	    	this.params.comOriginalprice=obj.comOriginalprice
	    	this.params.comIspost=obj.comIspost==true?1:0
	    	this.params.freight=obj.freight
	    	this.params.money=obj.money  	
	    },
		// 清除所有图片
		clear(){
			this.fileList=[];
			this.goodsImage=[];
			this.params.goodsImage=''
		},
		// base64转图片
		dataURLtoBlob(dataurl) {		
		    var arr = dataurl.split(','),		
		    mime = arr[0].match(/:(.*?);/)[1],		
		    bstr = atob(arr[1]),		
		    n = bstr.length,		
		    u8arr = new Uint8Array(n);		
		    while (n--) {		
		        u8arr[n] = bstr.charCodeAt(n);		
		    }		
		    return new Blob([u8arr], {		
		        type: mime		
		    });		
		},
		// 保存服务器图片路径
		afterRead(res){	
			let that=this
	        var obj = this.dataURLtoBlob(res.content);
			var fd = new FormData();
			fd.append("file", obj,"image.png");
			this.$jquery.ajax({
			    url: this.url1,
			    type: "POST",
			    processData: false,
			    contentType: false,
			    data: fd,
			    success: function (result) {
			    	// console.log(result.data.url)
			    	that.goodsImage.push(result.data.url)
			    	// console.log(that.goodsImage)
			    	that.params.goodsImage=that.goodsImage.join(',')
			    }
			});		
		},
        // 发布
        release(){
	      	this.isLoading=true
	      	if(!this.canRelease){
	      		this.$toast('请输入商品描述、售价、商品图片、分类')
	      		return false      		
	      	}
	      	if(!this.params.comDesc){
	      		this.$toast('请输入商品描述')
	      		return false         		
	      	}
	      	if(!this.params.goodsImage){
	      		this.$toast('请至少上传一张图片')
	      		return false      		
	      	}         
	      	if(!this.params.categoryId){
	      		this.$toast('请选择分类')
	      		return false
	      	}  
	      	if(!this.params.comPrice){
	      		this.$toast('请输入商品价格')
	      		return false
	      	}
	      	this.isLoading=true
	      	let that=this
	      	// console.log(this.params)
		    this.$Axios.Post(this.url2, this.params)
		    .then(function(res) {
		       that.isLoading=false
	           let arg='[{"id":"'+res.comId+'"}]' 
		   	   // that.link('detail',arg)	
		    })	      	
        }, 
        // 获取平台管理费用


        getPlatform(){
	      	let that=this
		    this.$Axios.Get(this.url3+'/1')
		    .then(function(res) {
		       that.platform='￥'+res.data.goodsManagerFee.toFixed(2) 
		    })	        	
        },
        // 获取商品信息
        getData(){
        	let that=this
		    this.$Axios.Get(this.url4+'/'+this.comId+'/'+this.userId)
		    .then(function(res) {
		       //console.log(res)	
		       that.params.comDesc=res.data.comDesc;
		       let arr=res.data.goodsImageList
		       for(var i=0;i<arr.length;i++){
		       	 let obj={}
		       	 obj.url=arr[i]
		       	 obj.isImage=true
		       	 that.fileList.push(obj)
		       }
		       that.params.comId=res.data.comId
		       that.params.address=res.data.address 
		       that.params.goodsIsprice=res.data.goodsIsprice
		       that.params.goodsIsnew=res.data.goodsIsnew
		       that.params.trade_type=res.data.tradeType
		       that.params.categoryId=res.data.categoryId
		       that.params.comPrice=res.data.comPrice
		       that.params.comOriginalprice=res.data.comOriginalprice
		       that.params.comIspost=res.data.comIspost?1:0
		       that.params.freight=res.data.freight
		       that.params.comUid=res.data.comUid
               that.params.goodsImage=res.data.goodsImageList.join(',')	
               that.goodsImage=res.data.goodsImageList


		       let freight=res.data.freight.toFixed(2)
		       let comOriginalprice=res.data.comOriginalprice.toFixed(2)
		       let comPrice=res.data.comPrice.toFixed(2)
		       let money=res.data.money.toFixed(2)
		       let comIspost=res.data.comIspost
		       let categoryName=res.data.categoryName
		       let goodsIsprice=res.data.goodsIsprice
		       let goodsIsnew=res.data.goodsIsnew
		       let trade_type=res.data.tradeType
		       that.$refs.floor21.init(freight,comOriginalprice,comPrice,money);
		       //包邮
		       if(res.data.comIspost>0){
		       	   that.mainPrice=`￥${comPrice}包邮`
		       }
		       //不包邮
		       else{
		       	   that.mainPrice=`￥${comPrice}+运费(￥${freight})`
		       }
		       that.$refs.floor20.editInit(categoryName,goodsIsprice,goodsIsnew,trade_type);
		       let str1=goodsIsprice==0?'不讲价':'可讲价'
		       let str2=goodsIsnew==0?'半新':'全新'
		       let str3=trade_type==1?'自提':'邮寄'
		       that.mainMoreInfo=categoryName+','+str1+','+str2+','+str3
		    })	        	
        }
	},
	mixins:[publicFun],//混入
	mounted() {
		this.comId=this.$router.currentRoute.query.comId;
		this.userId=this.$router.currentRoute.query.userId;
        this.getPlatform()
        this.getData()
	}
}
</script>

<style scoped> 
.wrap{padding: 20px;background: #fff;}	
.van-nav-bar__title{font-weight: bold;}
.a{height: 46px;width: 70px;display: flex;justify-content: center;align-items: center;}
.release{background: #fef723;border:none;color: #333;}
.cc{display: flex;align-items: center;justify-content: center;}
.imgWrap{height: 100px;background: #f2f2f2;border-radius: 4px;}
.imgWrap>img{width: 100%;height: 100%;border-radius: 4px;}
.tips{color: #848484;margin-top: 20px;}
.tips>span{background: #f2f2f2;padding: 4px 12px;border-radius: 10px;}
.cell{margin-top: 30px;}
.van-cell{padding-left: 0;padding-right: 0;}
.borderCell:nth-child(1){border-top:1px solid #f5f6f8}
.borderCell:nth-last-child(1){border-bottom:1px solid #f5f6f8}

</style>